
imageModel = function(){
	

	this.svgns = 'http://www.w3.org/2000/svg';
	this.xlinkns = 'http://www.w3.org/1999/xlink';
	this.ALPHA_BAR_X = 10;
	this.ALPHA_BAR_WIDTH = 50;
	this.m_strSrc = '';
	this.m_nZindex = 0;
	this.m_nX = 0;
	this.m_nY = 0;
	this.m_nWidth = 0;
	this.m_nHeight = 0;
	
	this.m_conType = 1;
	
	this.m_nBetweenX = 0;
	this.m_nBetweenY = 0;
	
	this.m_ele_root = document.createElementNS(this.svgns, 'svg');
	this.m_ele_root.parent = this;
	
	
	this.m_ele_image = document.createElementNS(this.svgns, 'image');
	this.m_ele_image.parent = this;
	this.m_ele_image.setAttributeNS(null, 'onclick', 'this.parent.displayControlPoint();this.parent.showAlphaControlBar(true);');
	this.m_ele_image.setAttributeNS(null, 'onmousedown', 'selObject = this.parent;selObject.imageMouseDown(event);');
	this.m_ele_image.setAttributeNS(null, 'onmouseout', 'this.parent.showAlphaControlBar(false);');
	
	
	this.m_ele_controlLeftTop = document.createElementNS(this.svgns, 'image');
	this.m_ele_controlLeftTop.parent = this;
	this.m_ele_controlLeftTop.setAttributeNS(null, 'onmousedown', 'selObject = this.parent;selObject.sizecontrolDown(event, 1);');
	this.m_ele_controlLeftTop.setAttributeNS(null, 'onmouseover', 'this.parent.displayControlPoint();');
	this.m_ele_controlLeftTop.setAttributeNS(null, 'onmouseout', 'this.parent.hideControlPoint();');
	this.m_ele_controlLeftTop.setAttributeNS(this.xlinkns, 'xlink:href', './img/imageModel/lefttop.png');
	
	
	this.m_ele_controlRightTop = document.createElementNS(this.svgns, 'image');
	this.m_ele_controlRightTop.parent = this;
	this.m_ele_controlRightTop.setAttributeNS(null, 'onmousedown', 'selObject = this.parent;selObject.sizecontrolDown(event, 2);');
	this.m_ele_controlRightTop.setAttributeNS(null, 'onmouseover', 'this.parent.displayControlPoint();');
	this.m_ele_controlRightTop.setAttributeNS(null, 'onmouseout', 'this.parent.hideControlPoint();');
	this.m_ele_controlRightTop.setAttributeNS(this.xlinkns, 'xlink:href', './img/imageModel/righttop.png');

	
	this.m_ele_controlLeftBottom = document.createElementNS(this.svgns, 'image');
	this.m_ele_controlLeftBottom.parent = this;
	this.m_ele_controlLeftBottom.setAttributeNS(null, 'onmousedown', 'selObject = this.parent;selObject.sizecontrolDown(event, 3);');
	this.m_ele_controlLeftBottom.setAttributeNS(null, 'onmouseover', 'this.parent.displayControlPoint();');
	this.m_ele_controlLeftBottom.setAttributeNS(null, 'onmouseout', 'this.parent.hideControlPoint();');
	this.m_ele_controlLeftBottom.setAttributeNS(this.xlinkns, 'xlink:href', './img/imageModel/leftbottom.png');
	
	
	this.m_ele_controlRightBottom = document.createElementNS(this.svgns, 'image');
	this.m_ele_controlRightBottom.parent = this;
	this.m_ele_controlRightBottom.setAttributeNS(null, 'onmousedown', 'selObject = this.parent;selObject.sizecontrolDown(event, 4);');
	this.m_ele_controlRightBottom.setAttributeNS(null, 'onmouseover', 'this.parent.displayControlPoint();');
	this.m_ele_controlRightBottom.setAttributeNS(null, 'onmouseout', 'this.parent.hideControlPoint();');
	this.m_ele_controlRightBottom.setAttributeNS(this.xlinkns, 'xlink:href', './img/imageModel/rightbottom.png');

	
	this.m_ele_controlAlpha_Bar = document.createElementNS(this.svgns, 'rect');
	this.m_ele_controlAlpha_Point = document.createElementNS(this.svgns, 'ellipse');
	
	
	this.m_ele_controlAlpha_plus = document.createElementNS(this.svgns, 'image');
	this.m_ele_controlAlpha_minus = document.createElementNS(this.svgns, 'image');
	

	
	this.m_ele_root.appendChild(this.m_ele_image);
	
	this.m_ele_root.appendChild(this.m_ele_controlLeftTop);
	this.m_ele_root.appendChild(this.m_ele_controlRightTop);
	this.m_ele_root.appendChild(this.m_ele_controlLeftBottom);
	this.m_ele_root.appendChild(this.m_ele_controlRightBottom);
	
	this.m_ele_root.appendChild(this.m_ele_controlAlpha_Bar);
	this.m_ele_root.appendChild(this.m_ele_controlAlpha_Point);
	
	this.m_ele_root.appendChild(this.m_ele_controlAlpha_plus);
	this.m_ele_root.appendChild(this.m_ele_controlAlpha_minus);
	
	
	eleRootGroup.appendChild(this.m_ele_root);
	
	this.mouseDown = function(oEvent){
		
	}
	
	this.mouseUp = function(oEvent){
		
	}
	
	this.mouseMove = function(oEvent){
		
	}
	
	this.zIndexChange = function(_nZIndex){
		
	}
	
	this.objectLoad = function(){
		
	}
	
	this.objectSave = function(){
		
	}
	
	
	
	this.sizecontrolDown = function(oEvent, nType){
		eleBody.setAttributeNS(null, 'onmousemove', 'selObject.sizecontrolMove(event);');
		eleBody.setAttributeNS(null, 'onmouseup', 'selObject.sizecontrolUp();');
		
		this.m_conType = nType;
	}
	
	this.sizecontrolUp = function(){
		eleBody.setAttributeNS(null, 'onmousemove', '');
		eleBody.setAttributeNS(null, 'onmouseup', '');
		
		this.m_nBetweenX = 0;
		this.m_nBetweenY = 0;
	}
	
	this.sizecontrolMove = function(oEvent){
		if(this.m_conType == 1){
			this.resize(oEvent.clientX, oEvent.clientY, (this.m_nX + this.m_nWidth) - oEvent.clientX, (this.m_nY + this.m_nHeight) - oEvent.clientY);
		}else if(this.m_conType == 2){
			this.resize(this.m_nX, oEvent.clientY, oEvent.clientX - this.m_nX, (this.m_nY + this.m_nHeight) - oEvent.clientY);
		}else if(this.m_conType == 3){
			this.resize(oEvent.clientX, this.m_nY, (this.m_nX + this.m_nWidth) - oEvent.clientX, oEvent.clientY - this.m_nY);
		}else if(this.m_conType == 4){
			this.resize(this.m_nX, this.m_nY, oEvent.clientX - this.m_nX, oEvent.clientY - this.m_nY);
		}
	}
	
	
	this.imageMouseMove = function(oEvent){
		this.move(oEvent.clientX - this.m_nBetweenX, oEvent.clientY - this.m_nBetweenY);
	}
	
	this.imageMouseDown = function(oEvent){
		eleBody.setAttributeNS(null, 'onmousemove', 'selObject.imageMouseMove(event);');
		eleBody.setAttributeNS(null, 'onmouseup', 'selObject.imageMouseUp();');
		
		this.m_nBetweenX = oEvent.clientX - this.m_nX;
		this.m_nBetweenY = oEvent.clientY- this.m_nY;
	}
	
	this.imageMouseUp = function(){
		eleBody.setAttributeNS(null, 'onmousemove', '');
		eleBody.setAttributeNS(null, 'onmouseup', '');
		
		this.m_nBetweenX = 0;
		this.m_nBetweenY = 0;
	}

	this.showAlphaControlBar = function(_bIsShow){
		if(_bIsShow == true){
			this.displayControlPoint();
		}else{
			this.hideControlPoint();
		}
	}
	
	
	this.displayAlphaControlBar = function(){
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'style', 'display:;');
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'style', 'display:;');
		this.m_ele_controlAlpha_plus.setAttributeNS(null, 'style', 'display:;');
		this.m_ele_controlAlpha_minus.setAttributeNS(null, 'style', 'display:;');
	}
	
	
	this.hideAlphaControlBar = function(){
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'style', 'display:none;');
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'style', 'display:none;');
		this.m_ele_controlAlpha_plus.setAttributeNS(null, 'style', 'display:none;');
		this.m_ele_controlAlpha_minus.setAttributeNS(null, 'style', 'display:none;');
	}
	
	
	this.alphaChange = function(_lfAlpha){
		this.m_ele_image.setAttributeNS(null, 'opacity', _lfAlpha);
	}
	
	
	this.settingPosition_AlphaControlPoint = function(){
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'fill', '#FFF');
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'x', this.ALPHA_BAR_X);
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'y', '10');
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'rx', '2');
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'ry', '2');
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'width', this.ALPHA_BAR_WIDTH);
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'height', '3');
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'stroke', '#DDD');
		this.m_ele_controlAlpha_Bar.setAttributeNS(null, 'stroke-width', '1px');
		
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'fill', '#FDFDFD');
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'cx', this.ALPHA_BAR_X);
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'cy', '11');
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'rx', '4');
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'ry', '4');
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'stroke', '#DDD');
		this.m_ele_controlAlpha_Point.setAttributeNS(null, 'stroke-width', '1px');
		
		this.m_ele_controlAlpha_plus.setAttributeNS(null, 'x', '70');
		this.m_ele_controlAlpha_plus.setAttributeNS(null, 'y', '4');
		this.m_ele_controlAlpha_plus.setAttributeNS(null, 'width', '15');
		this.m_ele_controlAlpha_plus.setAttributeNS(null, 'height', '15');
		this.m_ele_controlAlpha_plus.setAttributeNS(null, 'preserveAspectRatio', 'none');
		this.m_ele_controlAlpha_plus.setAttributeNS(this.xlinkns, 'xlink:href', './img/imageModel/plus.png');
		
		this.m_ele_controlAlpha_minus.setAttributeNS(null, 'x', '95');
		this.m_ele_controlAlpha_minus.setAttributeNS(null, 'y', '4');
		this.m_ele_controlAlpha_minus.setAttributeNS(null, 'width', '15');
		this.m_ele_controlAlpha_minus.setAttributeNS(null, 'height', '15');
		this.m_ele_controlAlpha_minus.setAttributeNS(null, 'preserveAspectRatio', 'none');
		this.m_ele_controlAlpha_minus.setAttributeNS(this.xlinkns, 'xlink:href', './img/imageModel/minus.png');
		
		this.hideAlphaControlBar();
	}
	
	
	this.settingControl_PointStyle = function(){
		this.m_ele_controlLeftTop.setAttributeNS(null, 'fill', '#ff5');
		this.m_ele_controlRightTop.setAttributeNS(null, 'fill', '#ff5');
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'fill', '#ff5');
		this.m_ele_controlRightBottom.setAttributeNS(null, 'fill', '#ff5');
	}
	
	this.settingPosition_ControlPoint = function(){
		this.m_ele_controlLeftTop.setAttributeNS(null, 'style', '');
		this.m_ele_controlLeftTop.setAttributeNS(null, 'x', 0);
		this.m_ele_controlLeftTop.setAttributeNS(null, 'y', 0);
		this.m_ele_controlLeftTop.setAttributeNS(null, 'width', 10);
		this.m_ele_controlLeftTop.setAttributeNS(null, 'height', 10);
		this.m_ele_controlLeftTop.setAttributeNS(null, 'opacity', 0);
		
		this.m_ele_controlRightTop.setAttributeNS(null, 'style', '');
		this.m_ele_controlRightTop.setAttributeNS(null, 'x', this.m_nWidth - 10);
		this.m_ele_controlRightTop.setAttributeNS(null, 'y', 0);
		this.m_ele_controlRightTop.setAttributeNS(null, 'width', 10);
		this.m_ele_controlRightTop.setAttributeNS(null, 'height', 10);
		this.m_ele_controlRightTop.setAttributeNS(null, 'opacity', 0);
		
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'style', '');
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'x', 0);
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'y', this.m_nHeight - 10);
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'width', 10);
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'height', 10);
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'opacity', 0);
		
		this.m_ele_controlRightBottom.setAttributeNS(null, 'style', '');
		this.m_ele_controlRightBottom.setAttributeNS(null, 'x', this.m_nWidth - 10);
		this.m_ele_controlRightBottom.setAttributeNS(null, 'y', this.m_nHeight - 10);
		this.m_ele_controlRightBottom.setAttributeNS(null, 'width', 10);
		this.m_ele_controlRightBottom.setAttributeNS(null, 'height', 10);
		this.m_ele_controlRightBottom.setAttributeNS(null, 'opacity', 0);
	}
	
	this.displayControlPoint = function(){
		this.m_ele_controlLeftTop.setAttributeNS(null, 'opacity', 0.8);
		this.m_ele_controlRightTop.setAttributeNS(null, 'opacity', 0.8);
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'opacity', 0.8);
		this.m_ele_controlRightBottom.setAttributeNS(null, 'opacity', 0.8);
	}
	
	this.hideControlPoint = function(){
		this.m_ele_controlLeftTop.setAttributeNS(null, 'opacity', 0);
		this.m_ele_controlRightTop.setAttributeNS(null, 'opacity', 0);
		this.m_ele_controlLeftBottom.setAttributeNS(null, 'opacity', 0);
		this.m_ele_controlRightBottom.setAttributeNS(null, 'opacity', 0);
	}
	
	this.displayImage = function(){
		this.settingPosition_ControlPoint();
		//this.settingPosition_AlphaControlPoint();
		
		this.m_ele_root.setAttributeNS(null, 'style', '');
		this.m_ele_root.setAttributeNS(null, 'x', this.m_nX);
		this.m_ele_root.setAttributeNS(null, 'y', this.m_nY);
		this.m_ele_root.setAttributeNS(null, 'preserveAspectRatio', 'none');
		
		this.m_ele_image.setAttributeNS(null, 'style', '');
		this.m_ele_image.setAttributeNS(this.xlinkns, 'xlink:href', this.m_strSrc);
		this.m_ele_image.setAttributeNS(null, 'width', '100%');
		this.m_ele_image.setAttributeNS(null, 'height', '100%');
		//this.m_ele_image.setAttributeNS(null, 'width', this.m_nWidth);
		//this.m_ele_image.setAttributeNS(null, 'height', this.m_nHeight);
		this.m_ele_image.setAttributeNS(null, 'preserveAspectRatio', 'none');
		
		
		this.m_ele_controlRightTop.setAttributeNS(null, 'style', '');
		this.m_ele_root.setAttributeNS(null, 'x', this.m_nX);
		this.m_ele_root.setAttributeNS(null, 'y', this.m_nY);

		this.m_ele_controlLeftBottom.setAttributeNS(null, 'style', '');
		this.m_ele_root.setAttributeNS(null, 'x', this.m_nX);
		this.m_ele_root.setAttributeNS(null, 'y', this.m_nY);

		this.m_ele_controlRightBottom.setAttributeNS(null, 'style', '');
		this.m_ele_root.setAttributeNS(null, 'x', this.m_nX);
		this.m_ele_root.setAttributeNS(null, 'y', this.m_nY);
	}
	
	this.move = function(_nX, _nY){
		this.resize(_nX, _nY, this.m_nWidth, this.m_nHeight);
	}
	
	this.resize = function(_nX, _nY, _nWidth, _nHeight){
		this.m_nX = _nX;
		this.m_nY = _nY;
		this.m_nWidth = _nWidth;
		this.m_nHeight = _nHeight;
		
		this.m_ele_root.setAttributeNS(null, 'x', _nX);
		this.m_ele_root.setAttributeNS(null, 'y', _nY);
		this.m_ele_root.setAttributeNS(null, 'width', _nWidth);
		this.m_ele_root.setAttributeNS(null, 'height', _nHeight);
		
		this.m_ele_image.setAttributeNS(null, 'width', _nWidth);
		this.m_ele_image.setAttributeNS(null, 'height', _nHeight);
		
		this.settingPosition_ControlPoint();
		this.displayControlPoint();
	}
	
	this.init = function(){
		this.settingControl_PointStyle();
		
	}
	
	this.init();
}

